<template>
  <div class="sim-expand-icon g-pointer" :class="{ show }" @click="onClick">
    <ArrowRight class="sim-expand-arrow" :class="{ expand }" />
  </div>
</template>

<script lang="ts" setup>
import { ArrowRight } from "@element-plus/icons-vue";

const props = withDefaults(
  defineProps<{
    show?: boolean;
    expand?: boolean;
  }>(),
  {
    show: true,
  }
);

const emit = defineEmits<{
  (e: "click", evt: MouseEvent, expand: boolean): void;
}>();

const onClick = (e: MouseEvent) => {
  emit("click", e, !props.expand);
};
</script>

<style lang="scss">
.sim-expand-icon {
  position: relative;
  box-sizing: border-box;
  display: inline;
  top: 2px;
  font-size: 12px;
  margin-right: 8px;
  opacity: 0;

  &.show {
    opacity: 1;
  }

  .sim-expand-arrow {
    width: 1em;
    height: 1em;

    &.expand {
      transform: rotate(90deg);
      transform-origin: center center;
    }
  }
}
</style>
